<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="Cache-Control" content="max-age=180">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>松鼠AI在线课堂</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body onload="getReList()">
		<div class="wrap">
			<div class="wrap_header">
				<div class="header_con">
					<div class="reward_note">奖励说明</div>
					<div class="reward_receive">领取奖励</div>
				</div>
			</div>
			<div class="wrap_content">
				<div class="wrap_count">
					<div class="wrap_count_c">
						<div class="already_register"></div>
						<div>已注册</div>
					</div>
					<div class="wrap_count_c">
						<div class="already_listen"></div>
						<div>已试听</div>
					</div>
					<div class="wrap_count_c">
						<div class="already_pay"></div>
						<div>已付费</div>
					</div>
					<div class="wrap_count_c">
						<div class="already_over"></div>
						<div>已过退费期</div>
					</div>
				</div>
				<div class="wrap_posi_center">
					<div class="wrap_position">
						<img src="img/position.jpg" alt="" />
					</div>
					<div class="wrap_title">邀请好友&nbsp;&nbsp;赢取奖励</div>
					<div class="imm_invitation" onclick="recomClick()">
						<img src="img/invitation.png" alt="" />
					</div>
				</div>
				<div class="wrap_con_list_to">
				</div>
			</div>
			<!--底部推荐-->
			<div class="recommend" onclick="recomClick()">
				<img src="img/recommend.png" />
			</div>
		</div>
		<!--奖励说明-->
		<div class="wrap_shadow">
			<div class="wrap_shadow_con">
				<div class="wrap_shadow_con_img_title">
					<img src="img/bonusnote.png" alt="" />
				</div>
				<div class="wrap_shadow_con_close">
					<img src="img/close.png" alt="" class="reward_close" />
				</div>
				<div class="wrap_shadow_con_intro">
					此页面包含了松鼠AI注册用户(推荐人)参加推荐新用户产生的推荐结果及相关 进度信息。推荐人因参加以上活动获得奖励，使用规则及其他说明具体活动规则。若对此页面有任何疑问，请联系班主任或者拨打客户电话11111.
				</div>
				<div class="wrap_shadow_con_iknow">
					<img src="img/iknow.png" alt="" class="reward_iknow" />
				</div>
			</div>
		</div>
		<!--领取奖励-->
		<div class="wrap_shadow_get">
			<div class="wrap_shadow_con_get">
				<div class="wrap_shadow_con_img_title_get">
					<img src="img/getreward.png" alt="" />
				</div>
				<div class="wrap_shadow_con_close_get">
					<img src="img/close.png" alt="" class="reward_close_get" />
				</div>
				<div class="wrap_shadow_con_intro_get">
					您的获奖条件尚未符合，干净督促朋友完成体验流程吧，惊喜大奖正在等着你哦！
				</div>
				<div class="wrap_shadow_con_iknow_get">
					<img src="img/iknow.png" alt="" class="reward_iknow_get" />
				</div>
			</div>
		</div>
		<!--推荐海报-->
		<div class="wrap_shadow_poster">
			<div class="wrap_shadow_con_poster">
				<div class="wrap_shadow_con_img_title_poster">
					<img src="img/songshu_icon.png" alt="" />
				</div>
				<div class="wrap_shadow_con_intro_poster">
					推荐海报已发送到公众号了哦
				</div>
				<div class="wrap_shadow_con_iknow_poster">
					<img src="img/iknow.png" alt="" class="reward_iknow_poster" />
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/flexible.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript">
			$('.wrap_posi_center').hide()
			$('.wrap_shadow').hide()
			$('.wrap_shadow_get').hide()
			$('.wrap_shadow_poster').hide()
			// 点击奖励说明
			$('.reward_note').click(function() {
				$('.wrap_shadow').show()
			})
			$('.reward_close').click(function() {
				$('.wrap_shadow').hide()
			})
			$('.reward_iknow').click(function() {
				$('.wrap_shadow').hide()
			})
			// 点击领取奖励
			$('.reward_receive').click(function() {
				$('.wrap_shadow_get').show()
			})
			$('.reward_close_get').click(function() {
				$('.wrap_shadow_get').hide()
			})
			$('.reward_iknow_get').click(function() {
				$('.wrap_shadow_get').hide()
			})
			// 点击推荐海报的我知道了
			$('.reward_iknow_poster').click(function() {
				$('.wrap_shadow_poster').hide()
			})

			// 推荐人列表
			function getReList() {
				$.ajax({
					type: "POST",
					url: "http://luolu.olcr.dev.songshuai.com/api/recommend/list",
					async: true,
					data: {
						token: 'songshuai',
						openid: 'ozOWy0lWvvuM4jc_bzgOU6nR-ljg'
					},
					success: function(res) {
						if(res.success == '1') {
							$('.already_register').html(res.data.state.register);
							$('.already_listen').html(res.data.state.listen);
							$('.already_pay').html(res.data.state.pay);
							$('.already_over').html(res.data.state.finish);
							var dataList = res.data.list;
							if(dataList == '') {
								$('.wrap_posi_center').show();
								$('.wrap_con_list_to').hide();
							}
							for(var i = 0; i < dataList.length; i++) {
								var content = `<div class="wrap_con_list">
													<div>
														<span>被推荐人&nbsp;:</span>
														<span>${dataList[i].cellphone}</span>
													</div>
													<div class="wrap_con_list_bot">
														<div class="wrap_con_list_stepone">
															<div class="wrap_con_list_steponeimg"><img src="img/register.png" alt="" />
																<span class="img_line_one"></span>
															</div>
															<div class="wrap_con_list_stepone_status_yes">已注册</div>
															<div class="wrap_con_list_stepone_date">${dataList[i].register_time}</div>
													    </div>
														<div class="wrap_con_list_stepone">
															<div class="wrap_con_list_steponeimg"><img src="${dataList[i].listen_time?'img/listen.png':'img/nolisten.png'}" alt="" class="imgTwo"/>
																<span class="${dataList[i].listen_time?'img_line_one':'img_line_no'}"></span>
															</div>
															<div class="${dataList[i].listen_time?'wrap_con_list_stepone_status_yes':'wrap_con_list_stepone_status_no'}">已试听</div>
															<div class="wrap_con_list_stepone_date" >${dataList[i].listen_time}</div>
														</div>
														<div class="wrap_con_list_stepone">
															<div class="wrap_con_list_steponeimg"><img src="${dataList[i].pay_time?'img/charge.png':'img/nocharge.png'}" alt="" class="imgThree"/>
																<span class="${dataList[i].pay_time?'img_line_one':'img_line_no'}"></span>
															</div>
															<div class="${dataList[i].pay_time?'wrap_con_list_stepone_status_yes':'wrap_con_list_stepone_status_no'}">已收费</div>
															<div class="wrap_con_list_stepone_date">${dataList[i].pay_time}</div>
														</div>
														<div class="wrap_con_list_stepone">
															<div class="wrap_con_list_steponeimg"><img src="${dataList[i].finish_time?'img/tfq.png':'img/notfq.png'}" alt="" class="imgFour"/>
															</div>
															<div class="${dataList[i].finish_time?'wrap_con_list_stepone_status_yes':'wrap_con_list_stepone_status_no'}">已过退费期</div>
															<div class="wrap_con_list_stepone_date">${dataList[i].finish_time}</div>
														</div>
													</div>
												</div>`
								$('.wrap_con_list_to').append(content);
							}
						}
					}
				});
			}
			// 点击底部推荐 
			function recomClick() {
				$.ajax({
					type: "POST",
					url: "http://luolu.olcr.dev.songshuai.com/api/recommend/send",
					async: true,
					data: {
						token: 'songshuai',
						openid: 'ozOWy0lWvvuM4jc_bzgOU6nR-ljg'
					},
					success: function(result) {
						if(result.success == 1) {
							$('.wrap_shadow_poster').show()
						}
					}
				});
			}
			// 点击占位图片
			$('.wrap_position').click(function () {
				window.location.href='activity.html'
			})
		</script>
	</body>

</html>